<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .btn:link{
      display: block;
      width: 30px;
      height: 10px;
      background-image: url(img/btn-link.png);
    }
    .btn:hover{
      background-image: url(img/btn-hover.png);
    }
    .btn:active{
      background-image: url(img/btn-active.png);
    }

    .btnDist:link{
      display: block;
      width: 30px;
      height: 10px;
      background-image: url(img/btn.png);
    }
    .btnDist:hover{
      background-image: url(img/btn.png);
      background-position: -30px 0px;
    }
    .btnDist:active{
      background-image: url(img/btn.png);
      background-position: -60px 0px;
    }
  </style>
</head>
<body>
<!--这种方法 用户体验并不是很好 因为伪类并不是网页加载时候完全加载
    这时候可以选择多状态都放在一张图片上 然后使其网页加载时全部加载-->
  <a href="#" class="btn"></a>
  <br><br>
  <a href="#" class="btnDist"></a>
</body>
</html>